<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <div class="left">
          <el-progress
            type="circle"
            :percentage="data.percentage-0"
            :width="150"
            :stroke-width="30"
            stroke-linecap="butt"
          ></el-progress>
        </div>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="data.data"
          style="width: 100%"
          height="260px"
        >
          <el-table-column
            prop="name"
            label="不合格考评项排名"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color: '#FFF',
                  display: 'inline-block',
                  backgroundColor: rankNumType[scope.$index]?rankNumType[scope.$index]:'#ccc',
                  height: size,
                  width: size,
                  lineHeight: size,
                  textAlign: 'center',
                  borderRadius: '50%'}"
              >{{ scope.$index + 1 }}
              </span>
              {{ scope.row.checkName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="checkTotal"
            width="40"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'UtilizationChart',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rankNumType: ['#F56C6C', '#E6A23C', '#409EFF'],
      size: '20px'
    }
  },
  methods: {}
}
</script>

<style scoped>
.el-row, .el-col {
  height: 100%;
}

.left {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
